<!--
 * @Author: Leo
 * @Date: 2021-12-08 17:52:27
 * @LastEditors: Leo
 * @LastEditTime: 2021-12-10 14:29:11
 * @Description: 任务列表
-->
<template>
  <div class="taskList-container">
    <div class="content">
      <div class="badge-list">
        <el-badge
          :value="taskNum"
          class="item item-num"
        >
          <div class="badge-content">
            任务列表
          </div>
        </el-badge>

        <div class="flex-box">
          <el-badge
            class="item item-num item-num-flex"
          >
            <div class="badge-content">
              当前下载任务
            </div>
          </el-badge>
          <div class="task-now">
            {{ taskNowName }}
          </div>
        </div>
      </div>

      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="220"
          stripe
          :header-cell-style="header_style"
        >
          <el-table-column
            type="index"
            width="30"
          />
          <el-table-column
            prop="name"
            label="已下载任务"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
    </div>
    <div
      class="tasklist-footer"
      @click="test"
    >
      注：任务已经开始下载，请暂时停止切换站点操作！--- {{ testv }}
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      tableData: [],
      taskNowName: '暂无下载任务',
      taskNum: 0,
      testv: ''
    }
  },
  mounted() {
    this.initList()
    // 监听缓存变化
    chrome.storage.onChanged.addListener((changes, areaName) => {
      console.log(`Value in ${areaName} has been changed:`)
      console.log(changes)
      this.testv = changes.test.newValue
      if(changes.taskNum) { // 任务数量变更
        this.taskNum = changes.taskNum.newValue
      }

      if(changes.fileName) {
        this.taskNowName = changes.fileName.newValue
      } else {
        this.taskNowName = '暂无下载任务'
      }

      if(changes.fileList) { // 下载完成列表
        this.tableDataInit(changes.fileList.newValue)
      }
    });
  },
  methods: {
    header_style() {
      const borderLine = "background-color:#ecf5ff;border-bottom:2px solid #e3eef4;color:#409eff;font-size: 13px;font-weight: normal;padding: 2px 0;";
      return borderLine;
    },
    initList() {
      this.$http({
        method: 'post',
        url: '/reportPageTask/list'
      }).then(res => {
        if(res.data.code === 0) {
          const taskList = JSON.parse(JSON.stringify(res.data.data)) || []
          if(taskList.length > 0) {
            this.taskNum = taskList.length
          } else {
            this.taskNowName = '暂无下载任务'
          }

          this.downFlag(taskList)
          console.log(taskList)
        }
      })
    },
    downFlag(arr) {
      chrome.storage.local.get(['isLoad'], v => {
        if(v.isLoad === 1) {
          chrome.storage.local.set({
            "goRsb": "0",
            "data": JSON.stringify(arr)
          })
          this.sendMessageToContentScript({
            cmd: 'hasData',
            value: arr,
            taskNum: arr.length
          })
        }
      })
    },
    sendMessageToContentScript(message, callback) {
        chrome.tabs.query({active: true, currentWindow: true}, tabs => {
            chrome.tabs.sendMessage(tabs[0].id, message, response => {
                if(callback) callback(response)
            })
        })
    },
    tableDataInit(arr) {
      this.tableData = []
      arr.forEach(k => {
        const item = {}
        item.name = k
        this.tableData.push(item)
      })
    },
    test() {
      chrome.storage.local.set({"test": Math.random()})
    }
  }
}
</script>
<style scoped>
.taskList-container {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  padding: 0 10px;
}
.tasklist-footer {
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  background: #fef0f0;
  color: #f56c6c;
}

.badge-list {
  display: flex;
  flex-direction: column;
}
.item-num {
  margin-bottom: 15px;
}
.content /deep/ .el-badge {
  width: 90px;
}
.badge-content {
  display: inline-block;
  width: 90px;
  background: #ecf5ff;
  font-size: 12px;
  color: #409eff;
  padding: 5px 0;
  text-align: center;
}

.content /deep/ .el-table .cell {
  font-size: 12px;
  color:#616d74;
}
.content /deep/ .el-table .el-table__cell {
  padding: 4px 0;
}

.flex-box {
  display: flex;
  align-items: center;
}
.task-now {
  flex: 1;
  font-size: 13px;
  height: 28px;
  line-height: 28px;
  margin-bottom: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  padding-left: 15px;
}
</style>
